<template>
  <div class="goods-details">
    <!-- 饮食介绍 -->
    <img class="info-img" v-if="goods.img" :src="goods.img">
    <div class="info-p">
  		<p class="title">{{goods.title}}</p>
  		<p class="price">￥{{goods.price}}</p>  
  		<div class="num">
  			<span class="tip">数量</span>
  			<div class="operate">
  				<span @click="jian"><img src="@/assets/jianhao.png"></span>
  				<span class="pay_num">{{num}}</span>
  				<span @click="jia"><img src="@/assets/jiahao.png"></span>
  			</div>
  		</div>
  	</div>
  	<div class="details">
  		<p>商品详情</p>
  		<div class="cons" v-html="goods.content"></div>
  	</div>
    <img class="kefu" src="@/assets/kefu.png" @click="is_show = true" alt="">
    <div class="mask-kefu" v-show="is_show">
      <div class="mask-bg" @click="is_show = false"></div>
      <div class="mask-content">
        <p class="title">人工服务</p>
        <img :src="code_img" alt="">
        <p class="tip">长按识别二维码，添加客服好友</p>
        <span @click="is_show = false">关闭</span>
      </div>
    </div>
  	<div class="btn" @click="router({path: 'payment', query: {num: num, goods_id: goods.id}})">
  		<img src="@/assets/yunbangsebei2.png">
  		立即购买
  	</div>
  </div>
</template>

<script>

import { get_goods_detail, baseUrl, getCode } from '@/api/api'

export default {
  components: {
  },
  data () {
    return {
  		num: 1,
  		goods: {},
      is_show: false,
      code_img: '',
    }
  },
  created () {
    this.goodsId = this.$route.query.goodsId
  	this.get_goods_details()
    this.get_code()
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    },
    jian () {
    	if(this.num <= 1) {
    		return 
    	}
    	this.num--
    },
    jia () {
    	this.num++
    },
    get_goods_details () {
    	get_goods_detail(this.goodsId).then((res) => {
    		this.goods = res.data.info
    	}).catch((err) => {
    		console.log(err)
    	})
    },
    get_code() {
      getCode().then((res) => {
        this.code_img = res.data.info;
      }).catch((err) => {
        console.dir(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .goods-details
    background-color #f2f2f2
    min-width 100vw
    min-height 100vh
    .info-p
      background-color #fff
      margin-bottom 1rem
      padding 2rem 1.5rem
      .title
        line-height 2.4rem
        font-size 1.5rem
        color #333
        font-weight bold
      .price
        color #FF659B
        font-weight bold
        font-size 1.7rem
        margin-top 1rem
      .num
        border-top 1px solid #e5e5e5
        margin-top 2rem
        display flex
        padding-top 3rem
        padding-bottom 1rem
        position relative
        .tip
          line-height 2.7rem
          font-size 1.2rem
          color #999
        .operate
          display flex
          flex 1
          position absolute
          right 0
          span
            display block
            flex 1
            max-width 2.7rem
            max-height 2.7rem
            min-width 2.7rem
            min-height 2.7rem
            box-sizing border-box
            border 1px solid #e5e5e5
            img
              width 100%
              height 100%
              display block
          .pay_num
            border none
            text-align center
            line-height 2.7rem
            max-width 4.6rem
            min-width 4.6rem
            font-size 1.6rem
    .details
      padding 2rem 1.5rem
      background-color #fff
      margin-bottom 4.4rem
      p
        font-size 1.6rem
        color #333
        font-weight bold
        margin-bottom 1rem
      .cons
        width 100%
        img
          width 100%
    .btn
      background-color #FF659B
      line-height 4.4rem
      text-align center
      height 4.4rem
      color #fff
      font-size 1.6rem
      position fixed
      bottom 0
      width 100%
      left 0 !important 
      border-radius 0 !important
      img
        display inline-block
        width 2rem
        height 2rem
        vertical-align middle
        position relative
        top -.1rem
    .kefu
      position fixed
      width 4.4rem
      right 1rem
      bottom 6.4rem
    .mask-kefu
      position fixed
      width 100vw
      height 100vh
      top 0
      left 0
      z-index 99
      .mask-bg
        position absolute
        width 100%
        height 100%
        background-color rgba(0,0,0,.2)
        left 0
        top 0
      .mask-content
        position absolute
        width calc(100% - 10.6rem)
        margin 0 5.3rem
        top 9rem
        background-color #fff
        border-radius .4rem
        text-align center
        .title
          color #FF659B
          height 6.6rem
          line-height 6.6rem
          font-size 1.7rem
        img
          width 12rem
          height 12rem
          display inline-block
        .tip
          font-size 1.2rem
          color #999
          margin-top .5rem
        span
          width 100%
          line-height 5.5rem
          height 5.5rem
          color #999;
          font-weight bold
          display block
</style>